<template>
  <div>
      <center>
            <div class="panel panel-default word">
                <div class="panel-body" >
                   {{word}}
                </div>
                <div class="panel panel-default word1" v-show="data">
                    <div class="panel-heading">
                        释义：
                    </div>
                    <div class="panel-body">
                        {{translate}}
                    </div>
                </div>
                <div class="panel panel-default word1">
                    <div class="panel-heading">
                        例句：
                    </div>
                    <div class="panel-body">
                        {{sentence}}
                    </div>
                </div>
            </div>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="up">上一张</el-button>
                    <el-button type="primary" @click="show">{{look}}</el-button>
                    <el-button type="primary" @click="down">下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
        </center>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import {getCardList} from '../../api/index';
export default {
  data(){
      return {
          word: '',
          words:[],
          translate:'',
          sentence:'',
          data:false,
          look:"查看释义",
          index:0
      }
  },
  methods:{
      getword(index){//通过当前index，对word进行赋值
        this.word=this.words[index].word;
        this.translate=this.words[index].translate;
        this.sentence=this.words[index].sentence;
      },
      up(){
          /*
          getCardList().then(res=>{
          let {words} = res.data;
          if(this.index>0){
                this.index--;
                this.word=words[this.index].word;
                this.translate=words[this.index].translate;
                this.sentence=words[this.index].sentence;
          }else{
              Message.warning("前面已经没有了")
          }
          
      })
      */
        if(this.index>0){
            this.index--;
            this.getword(this.index);
        }else{
            Message.warning("前面已经没有了")
        }
      },
      down(){
          /*
          getCardList().then(res=>{
          //let words=res.data.words;
          console.log(words.length)
          if(this.index<words.length-1){
              this.index++;
                this.word=words[this.index].word;
                this.translate=words[this.index].translate;
                this.sentence=words[this.index].sentence;
          }else{
              Message.warning("已经是最后一张")
          }
          
      })
      */
        if(this.index<this.words.length-1){
            this.index++;
            this.getword(this.index);
          }else{
            Message.warning("已经是最后一张")
          }
      },
      show(){
          this.data=!this.data;
          if(this.look==="查看释义"){
              this.look="关闭释义";
          }else{
              this.look="查看释义";
          }
      }
  },
  mounted(){
      getCardList().then(res=>{
          this.words = res.data.words;
          this.getword(this.index);
      })
      
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.word{
    width: 300px;
    height: 80px;
    line-height: 40px;
    font-size: 20px;
    margin-top: 100px;
}
.word1{
    width: 300px;
    height: 120px;
}
.panel-heading{
    font-size: 18px;
}
.word1 .panel-body{
    font-size: 16px;
}
button{
    margin-top: 320px;
}

</style>